<template>
  <div class="stNav">
      <!-- 类型 -->
    <el-dropdown class="stNav" @command="handleCommand"  trigger="click"  :hide-on-click="falg">
      <span class="el-dropdown-link">
        {{position}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <div class="downBox">
          <div class="title">人才类型</div>
          <div class="box-list">
            <ul class="list-item">
              <el-dropdown-item class="items" command="美甲师">美甲师</el-dropdown-item>
              <el-dropdown-item class="items" command="美瞳师">美瞳师</el-dropdown-item>
            </ul>
          </div>
        </div>      
         <el-button plain class="clear">清空筛选</el-button>
        <el-button plain class="ok" @click="hideIsShow">确定</el-button>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 区域 -->
    <el-dropdown class="stNav">
      <span class="el-dropdown-link">
        区域<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-tabs :tab-position="tabPosition" style="height: 200px">
          <el-tab-pane label="区域">
            <ul class="locationList">
              <li>不限</li>
              <li>朝阳区</li>
              <li>通州区</li>
              <li>大兴区</li>
              <li>海淀区</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="地铁">
            <ul class="locationList">
              <li>不限</li>
              <li>1号线</li>
              <li>2号线</li>
              <li>3号线</li>
              <li>4号线</li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 年龄 -->
    <el-dropdown class="stNav">
      <span class="el-dropdown-link">
        年龄<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <ul class="rent">
          <li>22岁-25岁</li>
          <li>25岁-30岁</li>
          <li>30岁-35岁</li>
          <li>35岁以上</li>
        </ul>
      </el-dropdown-menu>
    </el-dropdown>
  
    <!-- 更多 -->
    <el-dropdown class="stNav">
      <span class="el-dropdown-link">
        更多<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <div class="downBox">
          <div class="title">面积</div>
          <div class="box-list">
            <ul class="list-item">
              <li class="items">不限</li>
              <li class="items">20㎡以下</li>
              <li class="items">20㎡-50㎡</li>
              <li class="items">50㎡-100㎡</li>
              <li class="items">100㎡以上</li>
            </ul>
          </div>
        </div>
        <div class="downBox">
          <div class="title">楼层</div>
          <div class="box-list">
            <ul class="list-item">
              <li class="items">不限</li>
              <li class="items">地下</li>
              <li class="items">一层</li>
              <li class="items">二层</li>
              <li class="items">二层以上</li>
            </ul>
          </div>
        </div>
        <el-button plain class="clear">清空筛选</el-button>
        <el-button plain class="ok">确定</el-button>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
const cityOptions = ['美甲师', '美瞳师'];
export default {
  name: "StNav",
  data() {
    return {
      tabPosition: "left",
      position:"职位",
      post:"",
      falg:false,
       checkboxGroup1: ['美甲师'],
        cities: cityOptions
    };
  },
  methods:{
    handleCommand(command){
      console.log(command);
      this.post=command
     
     
    },
    hideIsShow(){
        this.position=this.post
      if(falg){
        this.falg=false
      }else{
        this.falg=true
      }
    }
  }
};
</script>

<style lang="less" scoped>
.stNav {
  width: 100%;
  height: 43px;
  display: flex;
  text-align: center;
  align-items: center;

  .el-dropdown-link {
    flex: 1;
    height: 43px;
    line-height: 43px;
  }
}
// 位置
.locationList {
  width: 190px;
  padding-left: 15px;
  box-sizing: border-box;
  li {
    width: 100%;
    height: 41px;
    border-bottom: 1px solid #eee;
  }
}
//租金
.rent {
  min-width: 363px;
  padding: 15px;
  box-sizing: border-box;
  li {
    height: 43px;
    line-height: 43px;
    border-bottom: 1px solid #eee;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
  }
}
// 类型
.downBox {
  width: 363px;
  .title {
    height: 23px;
    line-height: 20px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    margin-bottom: 19px;
    padding: 13px;
    box-sizing: border-box;
  }
  .box-list {
    width: 100%;
    .list-item {
      width: 363px;
      .items {
        width: 70px;
        height: 28px;
        display: inline-block;
        line-height: 28px;
        border-radius: 3px;
        margin: 10px;
        background-color: rgba(245, 245, 245, 1);
        text-align: center;
      }
    }
  }
}
// 按钮
.clear {
  width: 40%;
}
.ok {
  width: 55%;
  color: #fff;
  background-color: #6f448a;
}

.el-popper {
    width: 96.7%;
}
</style>